<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                width: 400px;
                height: 400px;
                margin: 0 auto;
                margin-top: 100px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                grid-template:
                    "A A B"
                    "C D B"
                    "C E E";
                gap: 5px;
                animation: rotate 20s linear infinite;
            }
            .item {
                overflow: hidden;
                border: 2px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .item img {
                object-fit: cover;
                animation: rerotate 20s linear infinite;
                width: 260%;
                height: 260%;
            }
            .item:nth-child(1) {
                grid-area: A;
            }
            .item:nth-child(2) {
                grid-area: B;
            }
            .item:nth-child(3) {
                grid-area: C;
            }
            .item:nth-child(4) {
                grid-area: D;
            }
            .item:nth-child(5) {
                grid-area: E;
            }

            @keyframes rotate {
                to {
                    transform: rotate(360deg);
                }
            }
            @keyframes rerotate {
                to {
                    transform: rotate(-360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">
                <img src="./imgs/2 (3).jpeg" alt="" draggable="false" />
            </div>
            <div class="item">
                <img src="./imgs/2 (1).jpeg" alt="" draggable="false" />
            </div>
            <div class="item">
                <img src="./imgs/2 (2).jpeg" alt="" draggable="false" />
            </div>
            <div class="item">
                <img src="./imgs/1 (2).jpg" alt="" draggable="false" />
            </div>
            <div class="item">
                <img src="./imgs/2 (4).jpeg" alt="" draggable="false" />
            </div>
        </div>
    </body>
</html>
